import React from 'react'
import {observer} from 'mobx-react'
import $ from 'jquery'
import 'bootstrap'
import {JsonStore} from '../stores/JsonStore'
import JsonEditor from './JsonEditor'

$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip()
})

@observer
class JobSummaryView extends React.Component {
  jsonStore = new JsonStore()

  disabledWrap(job, value) {
    if (job.disabled) {
      return (
        <s>{value}</s>
      )
    } else {
      return (
        value
      )
    }
  }
  getNameTd(job) {
    if (job.disabled) {
      return (
        <td data-container="body" data-toggle="tooltip" data-placement="top" title="Job is disabled"><s>{job.name}</s></td>
      )
    } else {
      return (
        <td>{job.name}</td>
      )
    }
  }
  renderJob(job) {
    return (
      <tr key={job.name}>
        {this.getNameTd(job)}
        <td className={job.nextExpected === 'OVERDUE' ? 'danger' : null} data-container="body" data-toggle="tooltip" data-placement="top" title={job.schedule}>{job.nextExpected}</td>
        <td className={this.getStatusClass(job)}>{job.status}</td>
        <td className={this.getStateClass(job)}>{job.state}</td>
        <td className="text-right">
          <div className="btn-group" role="group" aria-label="Left Align">
            <button
              type="button"
              onClick={(event) => this.runJob(event, job)}
              className="btn btn-success btn-secondary"
              aria-label="Run"
              data-loading-text='<i class="fa fa-spinner fa-pulse fa-fw"></i>'
              autoComplete="off"
              title="Run">
              <i className="fa fa-play" aria-hidden="true"></i>
            </button>
            <button
              type="button"
              className="btn btn-info"
              aria-label="Edit"
              onClick={() => this.editJob(job)}
              title="Edit">
              <i className="fa fa-pencil-square-o" aria-hidden="true"></i>
            </button>
            <button
              type="button"
              className="btn btn-warning"
              aria-label="Stop"
              data-loading-text='<i class="fa fa-spinner fa-pulse fa-fw"></i>'
              onClick={(event) => this.stopJob(event, job)}
              title="Stop">
              <i className="fa fa-stop" aria-hidden="true"></i>
            </button>
            <button
              type="button"
              className="btn btn-danger"
              aria-label="Delete"
              data-loading-text='<i class="fa fa-spinner fa-pulse fa-fw"></i>'
              onClick={(event) => this.deleteJob(this, job)}
              title="Delete">
              <i className="fa fa-times" aria-hidden="true"></i>
            </button>
          </div>
        </td>
      </tr>
    )
  }
  render() {
    const jobs = this.props.jobs
    return (
      <div>
        <div className="table-responsive">
          <table className="table table-striped table-hover table-condensed">
            <thead>
              <tr>
                <th>JOB</th>
                <th>NEXT RUN</th>
                <th>STATUS</th>
                <th>STATE</th>
                <th className="text-right">ACTIONS</th>
              </tr>
            </thead>
            <tbody>
              {jobs.map(job => this.renderJob(job))}
            </tbody>
          </table>
        </div>
        <JsonEditor jsonStore={this.jsonStore} />
      </div>
    )
  }

  getStatusClass(job) {
    if (job.status === 'success') {
      return 'success'
    }
    if (job.status === 'failure') {
      return 'warning'
    }
    return ''
  }

  getStateClass(job) {
    if (job.state.match(/\d+ running/)) {
      return 'success'
    }
    if (job.state === 'queued') {
      return 'info'
    }
    return ''
  }

  doRequest(target, method, url, success, fail) {
    var btn = $(target).button('loading')
    $.ajax({
      type: method,
      url: url,
    }).done(function(resp) {
      setTimeout(function() {
        btn.button('reset')
        if (success) {
          success()
        }
      }, 500)
    }).fail(function(resp) {
      setTimeout(function() {
        btn.button('reset')
        if (fail) {
          fail(resp)
        }
      }, 500)
    })
  }

  runJob(event, job) {
    this.doRequest(
      event.currentTarget,
      'PUT',
      'v1/scheduler/job/' + encodeURIComponent(job.name)
    )
  }

  stopJob(event, job) {
    this.doRequest(
      event.currentTarget,
      'DELETE',
      'v1/scheduler/task/kill/' + encodeURIComponent(job.name)
    )
  }

  deleteJob(event, job) {
    let _job = job
    this.doRequest(
      event.currentTarget,
      'DELETE',
      'v1/scheduler/job/' + encodeURIComponent(job.name),
      function(resp) {
        _job.destroy()
      }
    )
  }

  editJob(job) {
    this.jsonStore.loadJob(job.name)
    $('#json-modal').modal('show')
  }
}

JobSummaryView.propTypes = {
  jobs: React.PropTypes.object.isRequired
}

export default JobSummaryView
